<script setup lang="ts">
import { ref } from 'vue';
import type { Achievement } from '../types/Achievement'; // Adjust the import path
import type { ProjectIntroProps } from '../types/ProjectIntroProps'; // Adjust the import path
import type { Metric } from '../types/Metric';
defineProps<{ intro: ProjectIntroProps, }>();

const achievementColumns = [
  {
    title: '成果名称',
    dataIndex: 'achievement_name',
    key: 'achievement_name',
    render: (text: string, record: any) => ({
      children: text || '无',
      props: { rowSpan: record.achievement_name_rowSpan },
    }),
  },
  {
    title: '成果类型',
    dataIndex: 'achievement_type',
    key: 'achievement_type',
    render: (text: string, record: any) => ({
      children: text || '无',
      props: { rowSpan: record.achievement_type_rowSpan },
    }),
  },
  {
    title: '指标名称',
    dataIndex: 'metric_name',
    key: 'metric_name',
    render: (text: string) => text || '无',
  },
  {
    title: '当前状态',
    dataIndex: 'current_state',
    key: 'current_state',
    render: (text: string) => text || '无',
  },
  {
    title: '中期状态',
    dataIndex: 'medium_term_state',
    key: 'medium_term_state',
    render: (text: string) => text || '无',
  },
  {
    title: '完成状态',
    dataIndex: 'completion_state',
    key: 'completion_state',
    render: (text: string) => text || '无',
  },
];

const renderAchievementTable = (data: Achievement[]) => {
  const metrics = ref<Metric[]>([])

  const mergedData = data.flatMap((achievement) => {
    if (achievement.metric && achievement.metric.length > 0) {
      metrics.value = achievement.metric
    }
    else {
      metrics.value = [
        {
          metric_name: '无',
          current_state: '无',
          medium_term_state: '无',
          completion_state: '无',
        },
      ];
    }

    return metrics.value.map((metric, index) => ({
      key: `${achievement.achievement_name}-${index}`,
      achievement_name: index === 0 ? achievement.achievement_name : null,
      achievement_type: index === 0 ? achievement.achievement_type : null,
      achievement_name_rowSpan: index === 0 ? metrics.value.length : 0,
      achievement_type_rowSpan: index === 0 ? metrics.value.length : 0,
      ...metric,
    }));
  });

  return mergedData;
};
</script>

<template>
  <div class="tabs">
    <div>
      <span class="tabTitle">项目简介</span>
      <div class="cardWrapper">
        {{ intro.introduction || '暂无' }}
      </div>
    </div>

    <div v-if="intro.innovation" style="margin-top: 1rem;">
      <span class="tabTitle">创新点</span>
      <div class="cardWrapper">
        {{ intro.innovation }}
      </div>
    </div>

    <div v-if="intro.directionField" style="margin-top: 1rem;">
      <span class="tabTitle">方向领域</span>
      <div class="cardWrapper">
        {{ intro.directionField }}
      </div>
    </div>

    <div v-if="intro.directionTechnical" style="margin-top: 1rem;">
      <span class="tabTitle">技术方向</span>
      <div class="cardWrapper">
        {{ intro.directionTechnical }}
      </div>
    </div>

    <div v-if="intro.resources" style="margin-top: 1rem;">
      <span class="tabTitle">资源</span>
      <div class="cardWrapper">
        {{ intro.resources }}
      </div>
    </div>

    <div v-if="intro.submissionMaterials" style="margin-top: 1rem;">
      <span class="tabTitle">提交材料</span>
      <div class="cardWrapper">
        {{ intro.submissionMaterials }}
      </div>
    </div>

    <div v-if="intro.evaluationMethod" style="margin-top: 1rem;">
      <span class="tabTitle">评估方法</span>
      <div class="cardWrapper">
        {{ intro.evaluationMethod }}
      </div>
    </div>

    <div v-if="intro.supportMatching" style="margin-top: 1rem;">
      <span class="tabTitle">支持匹配</span>
      <div class="cardWrapper">
        {{ intro.supportMatching }}
      </div>
    </div>

    <div v-if="intro.iconicResults" style="margin-top: 1rem;">
      <span class="tabTitle">标志性成果</span>
      <div class="cardWrapper">
        {{ intro.iconicResults }}
      </div>
    </div>

    <div v-if="intro.challenge" style="margin-top: 1rem;">
      <span class="tabTitle">挑战</span>
      <div class="cardWrapper">
        {{ intro.challenge }}
      </div>
    </div>

    <div v-if="intro.undergraduatesAchievement" style="margin-top: 1rem;">
      <span class="tabTitle">本科生成果</span>
      <div class="cardWrapper">
        <a-table
          :columns="achievementColumns"
          :data-source="renderAchievementTable(JSON.parse(intro.undergraduatesAchievement))"
          pagination="false"
          bordered
        />
      </div>
    </div>

    <div v-if="intro.projectImages && intro.projectImages.length > 0" style="margin-top: 1rem;">
      <span class="tabTitle">项目展示</span>
      <div>
        <img
          v-for="(src, index) in intro.projectImages"
          :key="index"
          width="1147"
          :src="src"
          :alt="`Project Image ${index + 1}`"
          :style="{ marginTop: index > 0 ? '1em' : 0 }"
          style="max-width: 100%;"
        >
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tabs {
      overflow: auto;
      .tabTitle {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        display: inline-block;
      }
      .cardWrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .card {
          margin-bottom: 1em;
          border-radius: 1.25em;
          background-color: rgba(255, 255, 255, 1);
          border: 0.06em solid rgba(187, 187, 187, 1);
          padding: 1em;
          box-sizing: border-box;
          .cardTop {
            display: flex;
            align-items: center;
            .show {
              height: 4em;
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              margin-left: 1em;
              .topTags {
                padding: 0em 0.9em;
                margin-top: -10px;
                border: 1px solid #b7b9b688;
                border-radius: 0.25em;
                background-color: rgba(255, 255, 255, 1);
                color: rgba(16, 16, 16, 1);
                font-size: 1rem;
                text-align: center;
                font-family: Roboto;
              }
            }
          }
          .cardBottom {
            color: rgba(16, 16, 16, 1);
            font-size: 17px;
            margin-top: 0.8em;
          }
        }
      }
    }
</style>
